<template>
  <div id="wangeditor" class="wangeditor" ref="wangeditor"></div>
</template>

<script>
import E from "wangeditor";
export default {
  data() {
    return {
      config: {
        html: "",
        uploadFileName: "your-custom-fileName",
        uploadImgServer: "/upload-img",
        height: 300,
      },
    };
  },
  mounted() {
    this.loadHtml(this.ctx);
  },
  props: {
    ctx: {
      type: String,
      default: "<span>hello world</span>",
    },
  },
  model: {
    prop: "ctx", // 默认v-model 是value 方法是input 所以我们不用写
    event: "change",
  },
  methods: {
    appendHtml(html) {
      // 初始化 显示内容
    },
    getHtml() {
      return this.config.html;
    },
    onchange(newHtml) {
      console.log("change 之后最新的 html", newHtml);
      this.$emit("change", newHtml);
    },
    onblur(newHtml) {
      console.log("change 之后最新的 html", newHtml);
      this.config.html = newHtml;
    },
    onfocus(newHtml) {
      console.log("change 之后最新的 html", newHtml);
      this.config.html = newHtml;
    },
    linkImgCallback(src, alt, href) {
      console.log("图片 src ", src);
      console.log("图片文字说明", alt);
      console.log("跳转链接", href);
    },
    clearHtml() {
      const editor = new E(this.$refs.wangeditor);
      editor.txt.clear();
    },
    loadHtml(html) {
      const editor = new E(this.$refs.wangeditor);
      let { uploadFileName, uploadImgServer, height } = this.config;
      editor.config.uploadFileName = uploadFileName; // file name
      editor.config.uploadImgServer = uploadImgServer; // 路径上传
      editor.config.height = height;
      // 配置 onchange 回调函数
      editor.config.onchange = this.onchange;
      // 配置触发 onchange 的时间频率，默认为 200ms
      editor.config.onchangeTimeout = 500; // 修改为 500ms
      editor.config.onblur = this.onblur;
      editor.config.onfocus = this.onfocus;
      // 插入网络图片的回调
      editor.config.linkImgCallback = this.linkImgCallback;
      let wang = document.getElementById("wangeditor");
      wang.innerHTML = html;
      editor.create();
    },
  },
};
</script>

<style lang="scss">
.wangeditor {
  flex: 1;
}
</style>